<template>
  <div class="sys-state">
    <el-row>
      <el-col :span="24">
        <state-current/>
      </el-col>
    </el-row>

    <el-row>
      <!--      Today/week status -->
      <el-col :span="24">
        <state-recent/>
        <!--        <state-today></state-today>-->
      </el-col>
    </el-row>

    <!--    Custom searching -->
    <el-row>
      <el-col :span="24">
        <state-custom/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import sysStateMixins from '@/mixins/sys-state/sys-state.mixins'
import StateCurrent from './state.current'
import StateCustom from './state.custom'
import StateRecent from './state.recent'

export default {
  name: 'SysState',
  components: { StateRecent, StateCustom, StateCurrent },
  mixins: [sysStateMixins],
  data () {
    return {}
  },
  mounted () {},
  methods: {}
}
</script>

<style lang="scss">
.sys-state {
  h2 {
    margin-top: 0;
  }

  .head {
  }

  .state-col {
    margin-bottom: 20px;
  }

  .gauge-wrapper {
  }
  .el-row{
    margin-bottom: 30px;
  }

  .ip-list {
    border-top: 1px solid #cccccc;
    max-height: 380px;
    overflow: auto;

    p {
      margin: 0;
      border-bottom: 1px solid #eeeeee;
      padding: 10px 15px;
      color: #333333;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-weight: 300;

      &:hover {
        font-weight: normal;
        background-color: #409eff10;
      }
      &.ip-list-item-selected {
        font-weight: bold;
        background-color: #409eff10;
      }
    }
  }
}
</style>
